<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-model</title>
</head>

<body>
    <div id="app">
        <p>文本框元素：</p>
        <input placeholder="编辑我……" v-model="formData.message">
        <p>消息是: {{ formData.message }}</p>

        <p>textarea 元素：</p>
        <p style="white-space: pre">{{ formData.message2 }}</p>
        <textarea v-model="formData.message2" placeholder="多行文本输入……"></textarea>

        <p>select 元素：</p>
        <p style="white-space: pre">{{ formData.subject }}</p>
        <select v-model="formData.subject">
            <option value="1">JAVA</option>
            <option value="2">WEB</option>
            <option value="3">UI</option>
        </select>

        <p>单选框 元素：</p>
        <p style="white-space: pre">{{ formData.sex }}</p>
        男：<input type="radio" value="1" name="sex" v-model="formData.sex">
        女：<input type="radio" value="2" name="sex" v-model="formData.sex">

        <p>多选框 元素：</p>
        <p>{{ formData.fruit }}</p>
        苹果：<input type="checkbox" value="1" name="fruit" v-model="formData.fruit">
        香蕉：<input type="checkbox" value="2" name="fruit" v-model="formData.fruit">
        樱桃：<input type="checkbox" value="3" name="fruit" v-model="formData.fruit">
        <div><button @click="handleSubmit">提交</button></div>
    </div>
</body>
<script src="../vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            formData: {
                message: "消息1",
                message2: "消息2",
                subject: "2",
                sex: "1",
                fruit: ["1","3"]
            }

        },
        methods: {
            handleSubmit() {
                // 扩展运算符，浅拷贝
                let formData = {...this.formData};
                console.log("你提交的值：",formData);
            }
        }
    })
</script>

</html>